<template>
    <!-- 实体提取 -->
    <section class="w-full h-full flex flex-col">
        <MobileNav :navname="'实体提取'"  />
        <div class="base-list h-full " v-loading="loading">
            <el-scrollbar>
                <div class="entity-top h-3/5">
                    <el-scrollbar height="100%">
                    <ul class="w-4/5">
                        <div class="p-3 flex font-bold text-base head-title justify-center">需要提取的实体</div>
                        <li class="flex" :class="{ 'highlight': name }">
                            <div class="w-3/12 " :class="{ 'bg-green': name }">姓名</div>
                            <div class="w-9/12 " :class="{ 'text-green': name }">
                                {{ name }}
                                <i v-if="name" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                        <li class="flex" :class="{ 'highlight': phone }">
                            <div class="w-3/12 " :class="{ 'bg-green': phone }">联系电话</div>
                            <div class="w-9/12 " :class="{ 'text-green': phone }">
                                {{ phone }}
                                <i v-if="phone" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                        <li class="flex" :class="{ 'highlight': address }">
                            <div class="w-3/12 " :class="{ 'bg-green': address }">详细地址</div>
                            <div class="w-9/12 " :class="{ 'text-green': address }">
                                {{ address }}
                                <i v-if="address" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                        <li class="flex" :class="{ 'highlight': emailAdress }">
                            <div class="w-3/12 " :class="{ 'bg-green': emailAdress }">Email地址</div>
                            <div class="w-9/12 " :class="{ 'text-green': emailAdress }">
                                {{ emailAdress }}
                                <i v-if="emailAdress" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                        <li class="flex" :class="{ 'highlight': weChant }">
                            <div class="w-3/12 " :class="{ 'bg-green': weChant }">微信号</div>
                            <div class="w-9/12 " :class="{ 'text-green': weChant }">
                                {{ weChant }}
                                <i v-if="weChant" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                        <li class="flex" :class="{ 'highlight': qq }">
                            <div class="w-3/12 " :class="{ 'bg-green': qq }">QQ号</div>
                            <div class="w-9/12 " :class="{ 'text-green': qq }">
                                {{ qq }}
                                <i v-if="qq" class="checkmark iconfont icon-gou text-2xl"></i>
                            </div>
                        </li>
                    </ul>
                </el-scrollbar>
                </div>
                <div class="entity-bottom h-2/5" id="MyMap" v-if="showMap">
                    <!-- 地图 -->
                    <AmapComponent mapId="myMap" :center="mapPoint" :zoom="18" />
                </div>
            </el-scrollbar>
        </div>
        <div class="sys-info">
            <!-- <el-scrollbar class="info-scroll"> -->
                <div class="textera-save-style">
                    <el-input type="textarea" v-model="textareaVal" :rows="3" placeholder="请输入需要提取的实体"
                        class="text-input no-border" @focus="handleFocus" @blur="handleBlur" ref="textrea" />
                    <el-icon class="clear-button" @click="clearInput" @mouseover="overColor" @mouseout="outColor">
                        <Close />
                    </el-icon>
                </div>
                <div class="button-container h-10">
                    <el-button @click="setDefault">设为默认值</el-button>
                    <el-button type="success" @click="saveInput">开始提取</el-button>
                </div>
            <!-- </el-scrollbar> -->
        </div>
    </section>
</template>
<script lang="ts" setup>
import MobileNav from '@/components/mobile-ai/components/mobile-nav.vue';
// import AmapComponent from "../components/GaoDeMap/GaodeMap.vue"
import AmapComponent from "../../../components/GaoDeMap/GaodeMap.vue"

const hasToken = <string>localStorage.getItem('mobileAccessToken');
const loading = ref(false);

const textareaVal = ref('');
const router = useRouter()


//li数据
const name = ref('');
const phone = ref('');
const address = ref('');
const emailAdress = ref('');
const weChant = ref('');
const qq = ref('');


//地图是否显示
const showMap = ref(false);
//小叉叉清空事件
const clearInput = () => {
    textareaVal.value = '';
};
const textrea = ref();

//地图默认坐标中心 
const mapPoint = ref([116.397428, 39.90923])

import EntityExtract from "../../../api/currentdemo/EntityExtract"

//设为默认值
const setDefault = () => {
    // console.log('设为默认值');
    const defaultStr = `我叫张大海，我的电话是13918955689，我住在上海市宝山区长逸路188号903室，我的邮箱地址是889911@qq.com，我的微信号是weichat110，我的qq号是556789`
    textareaVal.value = defaultStr;
};
const handleFocus = () => {
    document.querySelector('.textera-save-style').classList.add('change-color');
};
const handleBlur = () => {
    document.querySelector('.textera-save-style').classList.remove('change-color');
};
const overColor = () => {
    document.querySelector('.clear-button').classList.add('a');
}
const outColor = () => {
    document.querySelector('.clear-button').classList.remove('a');
}




//开始归类事件
const saveInput = () => {
    // console.log('开始提取');

    if (!textareaVal.value.trim()) {
        ElMessage.error('请填写提取文本');
        return;
    }

    //组合后端所需数据
    const entitiesData = ['姓名', '联系电话', '详细地址', 'Email地址', '微信号', 'QQ号'];
    const obj = {
        entities: JSON.stringify(entitiesData),
        content: textareaVal.value
    };
    loading.value = true;

    // console.log('obj',obj);
    EntityExtract.openExtities(hasToken, obj).then(res => {
        // console.log('res==', res);

        if (res.data === '') {
            ElMessage.error('提取失败');
        }
        // 在回填数据之前应把之前的数据清空
        clearData()
        fillData(res.data)
        ElMessage.success('AI提取成功');
    }).catch(error => {
        loading.value = false
        ElMessage.error('提取失败');
    });
};
//回填方法
const fillData = (data) => {
    // console.log('data',data);
    if (data['姓名']) {
        name.value = data['姓名']
    }
    if (data['联系电话']) {
        phone.value = data['联系电话']
    }
    if (data['详细地址']) {
        address.value = data['详细地址'];
        EntityExtract.getAmpLocation(hasToken, address.value).then(res => {
            // console.log('res====',res);
            if (res.data && res.data.lat !== '' && res.data.lng !== '') {
                // console.log('res.data', res.data);
                showMap.value = true;
                mapPoint.value = [res.data.lat, res.data.lng];
            } else {
                showMap.value = false;
            }
        }).catch(error => {
            loading.value = false
            // ElMessage.error('提取失败');
        });
    } else {
        showMap.value = false;
    }
    if (data['Email地址']) {
        emailAdress.value = data['Email地址']
    }
    if (data['微信号']) {
        weChant.value = data['微信号']
    }
    if (data['QQ号']) {
        qq.value = data['QQ号']
    }

    loading.value = false;

}

// 页面缓存，清空所有的内容
watch(
    () => router.currentRoute.value,
    (newValue: any) => {
        name.value = '';
        phone.value = '';
        address.value = '';
        emailAdress.value = '';
        weChant.value = '';
        qq.value = '';
        textareaVal.value = '';
        showMap.value = false;
        // if (textrea.value) {
        //     textrea.value.focus();
        // }
    },
    { immediate: true }
);
//清空数据
const clearData = () => {
    name.value = '';
    phone.value = '';
    address.value = '';
    emailAdress.value = '';
    weChant.value = '';
    qq.value = '';
}






onMounted(() => {
    // textrea.value.focus();
})
</script>
<style scoped>
.base-list {
    /* width: 18rem; */
    display: flex;
    flex-direction: column;
    border-left: 1px solid var(--v-ai-rate-border-color);
    /* position: fixed;
    right: 0; */
    /* width: 30%; */
}
.head-title{
    color: var(--v-session-hist);
}
.base-list /deep/ .el-scrollbar__view {
    height: 100%;
}

.sys-info {
    /* flex: 1; */
    /* width: 77%; */
    flex-direction: column;
    display: flex;
    margin: 15px 0;
    justify-content: center;
    width: 100%;
    align-items: center
}
.info-scroll {
    width: 100%;

}

.sys-info ::v-deep(.el-scrollbar__wrap) {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.sys-info ::v-deep(.el-scrollbar__view) {
    width: 55%;
}

:deep(.el-textarea__inner) {
    border: none;
    box-shadow: none;
    resize: none;
}

.textera-save-style.change-color {
    border-color: #409eff;
}

.textera-save-style {
    border-radius: 5px;
    width: 90%;
}

.clear-button.a {
    color: #409eff;
}

.ai-triangle {
    width: 0;
    height: 0;
    border-left: 10px solid rgba(0, 0, 0, 0);
    border-right: 10px solid rgba(0, 0, 0, 0);
    border-top: 10px solid var(--v-chat_box_shadow_1);
    top: 8px;
    left: -10px;
}

.ai-answer {
    background-color:var(--v-ai-custmer-bg-color,#434346);
    color: var(--v-txt_icon_black_2, #1a2029);
}

.ai-answers{
    margin: 20px 0;
}

ul {
    margin: 0 auto;
    height: 100%;
}

ul>div{
    padding: 12px 12px 12px 0;
}
ul>li {
    margin-bottom: 10px;
    border-radius: 5px;
}

ul>li>div:first-child {
    background-color: var(--v-entity-title-bg-color);
    border-radius: 5px 0 0 5px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: #fff;
    padding: 8px 0;
}

ul>li>div:last-child {
    background-color: var(--v-entity-bg-color);
    border-radius: 0 5px 5px 0;
    display: flex;
    align-items: center;
    padding: 0 10px;
    justify-content: space-between;
}

.entity-bottom {
    border-top: 1px solid var(--v-nav-border-color);
}

.button-container{
    width: 90%;
    margin-top: 15px;
    display: flex;
}
.button-container .el-button:last-child{
    /* width: 69%; */
    flex: 1;
}
.button-container .el-button{
    height: 100%;
}

/* 高亮 */
.highlight {
    border: 1px solid #67C23A;
}

.bg-green {
    background-color: #67C23A !important;
}

.text-green {
    color: #67C23A;
    background-color: #f4f4f5 !important;
}

.checkmark {
    /* margin-left: 10px; */
    color: #67C23A;
}
</style>
